import React, { memo, useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
  Dimensions,
} from "react-native";
import { p } from "utils/pxToDp";
import themeStore from "stores/theme";
import commonStyle from "utils/style";
import YText from "components/YText";
import { setStorage, getStorage } from "utils/storage";
import { ThemeString } from "utils/types";
import { themeMap, THEME_LIST } from "utils/constants";
import Ionicons from "@expo/vector-icons/Ionicons";

const numColumns = 2; // 设置列数为2

const Skin = () => {
  const theme = themeStore.theme;
  const [selectId, setSelectId] = useState("");
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    initializeTheme();
  }, []);

  const initializeTheme = async () => {
    const storedTheme: ThemeString = await getStorage("theme");
    setSelectId(storedTheme ?? "light");
    setData(THEME_LIST);
  };

  const selectHandle = (info:{label:string,value:ThemeString})=>{
    let {value} = info
    if(value === selectId) return
    setSelectId(value)
    themeStore.toggleTheme(value)
  }

  const renderItem = (props: any) => {
    let { item, index } = props;
    if (!item) return null;
    let _activeStyle = {};
    if (item.value === selectId) {
      _activeStyle = {
        borderColor: theme.skinborder
      };
    }
    return (
      <TouchableOpacity
        style={[styles.item, commonStyle.flexrow, _activeStyle,{
          backgroundColor:theme.skinbg
        }]}
        onPress={()=>selectHandle(item)}
      >
        <Image
          source={require("assets/color-icon.png")}
          style={styles.skinimg}
        />
        {item.value === selectId && (
          <Ionicons
            style={styles.circle}
            color={theme.skinborder}
            name="checkmark-circle-sharp"
            size={22}
          />
        )}
        <YText color={theme.mainText} size={theme.f30} bold>
          {item.label}
        </YText>
      </TouchableOpacity>
    );
  };

  return (
    <View style={[styles.page, {
      backgroundColor:theme.vipbg,
      flex:1
    }]}>
      <View style={styles.skinwrapper}>
        <FlatList
          data={data}
          numColumns={numColumns} // 设置列数为2
          renderItem={renderItem}
          keyExtractor={(item) => item.value}
          contentContainerStyle={styles.container}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  page: {},
  skinwrapper: {},
  skinitem: {},
  container: {
    paddingHorizontal: 10,
    paddingTop: 10,
  },
  item: {
    position: "relative",
    zIndex: 1,
    flex: 1,
    // backgroundColor: "white",
    height: p(120),
    padding: p(20),
    borderRadius: p(25),
    marginBottom: p(30),
    marginHorizontal: p(20),
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(15),
    elevation: p(15),
    borderWidth: p(5),
    borderColor: "white",
  },
  skinimg: {
    width: p(50),
    height: p(50),
    marginRight: p(20),
  },
  circle: {
    position: "absolute",
    zIndex: 2,
    top: 0,
    right: 0,
  },
});

export default observer(Skin);
